<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('摄像头图片信息列表')" />
    <th:block th:include="include :: layui-css" />
	<style>
		.pic-list{
            display: grid;
            justify-content: space-between;
            grid-template-columns: repeat(auto-fill, 250px);
            grid-gap: 10px;
        }
		/* .pic-list img{
			width: 250px;
			height:180px;
            cursor: pointer;
            margin-top:10px;
		} */
        .img_out{
            padding:5px;
            border-radius: 3px;
            box-shadow: 1px 1px 3px rgba(0,0,0,.2);
            width: 250px;
			height:180px;
            margin-top:10px;
        }
        .pic-list img{
			width:100%;
			height:100%;
            cursor: pointer;
		}
        .hide{
            display: none;
        }
        .pic-modal ::-webkit-scrollbar {display:none !important}
        .pic-carousel-out img{
            /* width:100%; */
            height:100%;
            display: block;
            margin:0 auto;
        }
        .pic-carousel-out label { /*flex布局让子元素水平垂直居中*/
            display: flex;
            align-items: center;
            justify-content: center;
        }
        input[type=radio] {
            -webkit-appearance: none;
            appearance: none;
            outline: none;
            width: 12px;
            height: 12px;
            cursor: pointer;
            vertical-align: center;
            background: #fff;
            border: 1px solid #ccc;
            position: relative;
            margin-right: 5px;
        }
        input[type=radio]:checked::after {
            content: "";
            display: block;
            position: absolute;
            outline: none;
            top: 2px;
            left: 2px;
            right: 0;
            bottom: 0;
            width: 6px;
            height: 6px;
            background-color: rgb(53, 151, 216);
        }
        input[type=radio]:focus{
            outline: none;
        }
        input[type=radio], input[type=radio]:checked::after {
            border-radius: 50%;
        }
        .layui-layer-btn-c{
            text-align: center !important;
        }
        #pic-page{
            display: flex;
            justify-content: center;
        }
	</style>
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>
							<li>
								摄像头编码：<input type="text" name="cameraCode"/>
							</li>

							<!-- <li>
								图片路径：<input type="text" name="path"/>
							</li> -->

							<li>
                                确认状态：
                                <!-- <input type="text" name="confirmState"/> -->
                                <select name="confirmState" id="confirmState">
                                    <option value="">所有</option>
                                    <option value="1">已确认</option>
                                    <option value="0">未确认</option>
                                </select>
							</li>

							<li class="result_out">
                                识别结果：
                                <!-- <input type="text" name="distinguish"/> -->
                                <select name="distinguish" id="distinguish">
                                    <option value="">所有</option>
                                    <option value="1">识别错误</option>
                                    <option value="0">确认警告</option>
                                </select>
							</li>

							<li>
                                时间范围：
                                <!-- <input type="text" name="createTime"/> -->
                                <input type="text" id="createTime" placeholder="yyyy-MM-dd hh:mm:ss" autocomplete="off"/>
                                <span>-</span>
                                <input type="text" id="endTime" placeholder="yyyy-MM-dd hh:mm:ss" autocomplete="off"/>
							</li>

							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="getListPic()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                <a class="btn btn-success btn-rounded btn-sm" onclick="$.operate.add()" shiro:hasPermission="door:aiImg:add"><i class="fa fa-plus"></i> 添加</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			
	        <div class="btn-group-sm hide" id="toolbar" role="group">
				<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="door:aiImg:add">
					<i class="fa fa-plus"></i> 添加
				</a>
				<a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="door:aiImg:edit">
					<i class="fa fa-edit"></i> 修改
				</a>
				<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="door:aiImg:remove">
					<i class="fa fa-remove"></i> 删除
				</a>
				<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="door:aiImg:export">
						<i class="fa fa-download"></i> 导出
				 </a>
			</div>
			<div class="col-sm-12 select-table table-striped hide">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>
			<div class="col-sm-12 search-collapse table-striped">
                <div class="pic-list"></div>
                <div id="pic-page"></div>
            </div>
		</div>
	</div>
	<!-- 弹窗 -->
    <div class="pic-modal hide">
        <div class="pic-modal-content">
            <div class="layui-carousel" id="picCarousel" style='margin:0 auto'>
                <div carousel-item class="pic-carousel-out">
                </div>
            </div>
        </div>
    </div>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('door:aiImg:edit')}]];
        var removeFlag = [[${@permission.hasPermi('door:aiImg:remove')}]];
		var prefix = ctx + "door/aiImg";
		// 全局变量
		var picList=[];//告警信息图片列表
		var pageSize=10;//每页条数
		var pageNum=1;//当前页数
		var isAsc='desc';//升序降序

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
				exportUrl: prefix + "/export",
                modalName: "摄像头图片信息",
		        showExport: true,
                columns: [{
		            checkbox: true
		        },
				{
					field : 'id', 
					title : '图片id',
					visible: false
				},
				{
					field : 'cameraCode', 
					title : '摄像头编码',
					sortable: true
				},
				{
					field : 'path', 
					title : '图片路径',
					sortable: true
				},
				{
					field : 'confirmState', 
					title : '确认状态(0-未确认，1-以确认)',
					sortable: true
				},
				{
					field : 'distinguish', 
					title : '识别(0-确认警告，1-识别错误)',
					sortable: true
				},
				{
					field : 'createTime', 
					title : '创建时间',
					sortable: true
				},
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		            	var actions = [];
		            	actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
						return actions.join('');
		            }
		        }]
            };
            $.table.init(options);
			getListPic();
		});

        // 时间范围
        layui.use('laydate', function(){
       		var laydate = layui.laydate;
               var startDate = laydate.render({
		        elem: '#createTime',
                type: 'datetime',
		        max: $('#endTime').val(),
		        theme: 'molv',
		        trigger: 'click',
		        done: function(value, date) {
		            // 结束时间大于开始时间
		            if (value !== '') {
		                endDate.config.min.year = date.year;
		                endDate.config.min.month = date.month - 1;
		                endDate.config.min.date = date.date;
		            } else {
		                endDate.config.min.year = '';
		                endDate.config.min.month = '';
		                endDate.config.min.date = '';
		            }
		        }
		      });
       		
		      var endDate = laydate.render({
		        elem: '#endTime',
                type: 'datetime',
		        min: $('#createTime').val(),
		        theme: 'molv',
		        trigger: 'click',
		        done: function(value, date) {
		            // 开始时间小于结束时间
		            if (value !== '') {
		                startDate.config.max.year = date.year;
		                startDate.config.max.month = date.month - 1;
		                startDate.config.max.date = date.date;
		            } else {
		                startDate.config.max.year = '';
		                startDate.config.max.month = '';
		                startDate.config.max.date = '';
		            }
		        }
		    });
        })
		
        // 分页设置
        function setPicPage(total){
            layui.use('laypage', function(){
                var laypage = layui.laypage;
                
                //执行一个laypage实例
                laypage.render({
                    elem: 'pic-page' //注意，这里的 test1 是 ID，不用加 # 号
                    ,count: total ,//数据总数，从服务端得到
                    jump: function(obj, first){
                        //obj包含了当前分页的所有参数，比如：
                        // console.log('当前页',obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        // console.log('每页条数',obj.limit); //得到每页显示的条数
                        pageSize=obj.limit;
                        pageNum=obj.curr;
                        //首次不执行
                        if(!first){
						//do something
							getListPic();
                        }
                    }
                });
            });
            var marTop=$(".table-striped").height()-$(".pic-list").height()-55;
            if(marTop<15){
                $("#pic-page").attr('style','margin-top:15px');
            }else{
                $("#pic-page").attr('style','margin-top:'+marTop+'px')
            }
        }

        // 获取图片地址，展示到列表中
        function getListPic(){
			$.ajax({
				type:"post",
				url: ctx + "door/aiImg/list",
				data:getQueryParams(),
				success:function (data) {
					$(".pic-list").html(''); 
					picList=data.rows;
					for(var i=0,j=picList.length;i<j;i++){
						$(".pic-list").append(`
							<div class='img_out'><img id='test${i}' src='/profile/upload/${picList[i].path}' onclick='openPicModal(${i})' alt=""></div>
						`);
					}
					setPicPage(data.total);
				}
			});
		}
		
		
		// 获取查询信息
		function getQueryParams(){
			var data={};
			data.pageSize=pageSize;
			data.pageNum=pageNum;
			data.isAsc=isAsc;
			data.cameraCode=$("#cameraCode").val();
			data.confirmState=$("#confirmState").val();
			data.distinguish=$("#distinguish").val();
			data.createTime=$("#createTime").val();
			data.endTime=$("#endTime").val();
			return data
		}

        // 设置图片轮播
        function setPicCarousel(index){
            // 获取高度
            var wheight=$(window).height()-176;
            // console.log('高度为',wheight)
            
            $(".pic-carousel-out").html('');
            for(var i=0,j=picList.length;i<j;i++){
                $(".pic-carousel-out").append(`
                    <div>
                        <img class='lunbo${i}' src='/profile/upload/${picList[i].path}' name='${picList[i].id}' alt="">
                        <label style='margin-top:10px'><input type="radio" value='0' name="respet${i}"/>确认告警</label>
                        <label><input type="radio" name="respet${i}" value='1' />识别错误</label>
                    </div>
                `);
                if(picList[i].confirmState==1){
                    if(picList[i].distinguish==1){
                        $("input[name='respet"+i+"']").eq(1).attr("checked",true);
                    }else if(picList[i].distinguish==0){
                        $("input[name='respet"+i+"']").eq(0).attr("checked",true);
                    }
                }
            }
            layui.use('carousel', function(){
                var carousel = layui.carousel;
                //建造实例
                carousel.render({
                    elem: '#picCarousel',
                    width: '70%', //设置容器宽度
                    height: wheight, //设置容器高度
                    // arrow: 'always', //始终显示箭头
                    autoplay:false,
                    index:index,
                    indicator:'none',
                    // full:true
                    //,anim: 'updown' //切换动画方式
                });
            });
        }

        // 打开图片弹窗
        function openPicModal(index){
            setPicCarousel(index);
            
            $(".pic-modal").removeClass("hide");
            var toPicModal=layer.open({
                type: 1,
                title: ['告警信息分类'],
                // skin: 'layui-layer-lan', //皮肤 
                area: ['800px', '500px'], //宽高
                content: $(".pic-modal-content"), //DOM对象
                maxmin: false,
                scrollbar:false,
                shade: [0.4, '#000'],
                btn:["确定","取消"],
                btnAlign: 'c',
                end:function(){
                    $(".pic-modal").addClass("hide");
                    layer.close(toPicModal);
                },
                btn2:function(){
                    $(".pic-modal").addClass("hide");
                    layer.close(toPicModal);
                },
                yes:function(){
                    var resList=[];
                    for(var i=0,j=picList.length;i<j;i++){
                        if($("input[name='respet"+i+"']:checked").val()){
                            // console.log('康康图片',$(".lunbo"+i).attr('name'))
                            resList.push({
                                id:$(".lunbo"+i).attr('name'),
                                select:$("input[name='respet"+i+"']:checked").val()
                            })
                        }
                    }
                    console.log('确认情况',resList);
                    $(".pic-modal").addClass("hide");
                    layer.close(toPicModal);
                }
            });
            layer.full(toPicModal)
        }
    
    </script>
</body>
</html>